<template>
  <div class="game-level-container">
    <el-card>
      <div slot="header">
        <h2>游戏段位管理</h2>
      </div>
      
      <el-row :gutter="20" class="search-bar">
        <el-col :span="6">
          <el-select v-model="query.gameTypeId" placeholder="请选择游戏类型" clearable>
            <el-option 
              v-for="type in gameTypeList" 
              :key="type.id" 
              :label="type.gameTypeName" 
              :value="type.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input 
            v-model="query.gameLevelName" 
            placeholder="请输入段位名称"
            clearable
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button type="success" @click="showAddDialog">新增</el-button>
        </el-col>
      </el-row>
      
      <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="gameTypeName" label="游戏类型"></el-table-column>
        <el-table-column prop="gameLevelName" label="段位名称"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="creator" label="创建人"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 20, 50]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px;"
      ></el-pagination>
    </el-card>
    
    <!-- 新增/编辑对话框 -->
    <el-dialog title="游戏段位" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" ref="form" label-width="120px">
        <el-form-item label="游戏类型" prop="gameTypeId" :rules="[{ required: true, message: '请选择游戏类型', trigger: 'blur' }]">
          <el-select v-model="form.gameTypeId" placeholder="请选择游戏类型">
            <el-option 
              v-for="type in gameTypeList" 
              :key="type.id" 
              :label="type.gameTypeName" 
              :value="type.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="段位名称" prop="gameLevelName" :rules="[{ required: true, message: '请输入段位名称', trigger: 'blur' }]">
          <el-input v-model="form.gameLevelName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import adminApi from "@/http/adminApi";

export default {
  data() {
    return {
      query: {
        page: 1,
        pageSize: 10,
        gameTypeId: null,
        gameLevelName: '',
        tenantId: 1
      },
      tableData: [],
      total: 0,
      gameTypeList: [],
      dialogVisible: false,
      form: {
        id: null,
        gameTypeId: null,
        gameLevelName: '',
        tenantId: 1,
        creator: 'admin'
      }
    };
  },
  created() {
    this.getGameTypeList();
    this.getList();
  },
  methods: {
    getList() {
      adminApi.getGameLevelList(this.query).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    getGameTypeList() {
      adminApi.getGameTypeList({ page: 1, pageSize: 100, tenantId: 1 }).then(res => {
        if (res.code === 200) {
          this.gameTypeList = res.data.list;
        }
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getList();
    },
    showAddDialog() {
      this.form = {
        id: null,
        gameTypeId: null,
        gameLevelName: '',
        tenantId: 1,
        creator: 'admin'
      };
      this.dialogVisible = true;
    },
    showEditDialog(row) {
      this.form = { ...row };
      this.dialogVisible = true;
    },
    submitForm() {
      if (this.form.id) {
        // 编辑
        adminApi.updateGameLevel(this.form).then(res => {
          if (res.code === 200) {
            this.$message.success("更新成功");
            this.dialogVisible = false;
            this.getList();
          }
        });
      } else {
        // 新增
        adminApi.addGameLevel(this.form).then(res => {
          if (res.code === 200) {
            this.$message.success("添加成功");
            this.dialogVisible = false;
            this.getList();
          }
        });
      }
    },
    handleDelete(id) {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adminApi.deleteGameLevel({ id }).then(res => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.getList();
          }
        });
      });
    }
  }
};
</script>

<style scoped>
.search-bar {
  margin-bottom: 10px;
  padding: 10px 0;
}
</style>